<template>
  <view 
    class="fu-segmented"
    :class="{ 'fu-segmented--disabled': disabled }"
  >
    <view class="fu-segmented__wrap">
      <view 
        v-for="(item, index) in options"
        :key="index"
        class="fu-segmented__item"
        :class="{
          'fu-segmented__item--active': modelValue === (item.value ?? index),
          'fu-segmented__item--disabled': item.disabled
        }"
        :style="getItemStyle(item, index)"
        @click="onClick(item, index)"
      >
        <slot 
          name="item" 
          :item="item"
          :index="index"
          :active="modelValue === (item.value ?? index)"
        >
          <text class="fu-segmented__text">{{ item.text }}</text>
        </slot>
      </view>
      
      <!-- 选中背景 -->
      <view 
        class="fu-segmented__thumb"
        :style="thumbStyle"
      />
    </view>
  </view>
</template>

<script>
/**
 * fu-segmented 分段器组件
 * @description 用于在几个选项之间进行切换
 * @property {String/Number} modelValue - 当前选中项的值
 * @property {Array} options - 选项列表
 * @property {String} activeColor - 选中时的颜色
 * @property {String} inactiveColor - 未选中时的颜色
 * @property {Number} fontSize - 字体大小，单位rpx
 * @property {Boolean} disabled - 是否禁用
 * @event {Function} change - 选中项改变时触发
 */
export default {
  name: 'fu-segmented',
  props: {
    modelValue: {
      type: [String, Number],
      default: 0
    },
    options: {
      type: Array,
      default: () => []
    },
    activeColor: {
      type: String,
      default: ''
    },
    inactiveColor: {
      type: String,
      default: ''
    },
    fontSize: {
      type: Number,
      default: 28
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      thumbWidth: 0,
      thumbOffset: 0
    }
  },
  computed: {
    thumbStyle() {
      return {
        transform: `translateX(${this.thumbOffset}px)`,
        width: `${this.thumbWidth}px`,
        background: '#fff'
      }
    }
  },
  watch: {
    modelValue: {
      immediate: true,
      handler() {
        this.$nextTick(this.updateThumb)
      }
    },
    options: {
      handler() {
        this.$nextTick(this.updateThumb)
      }
    }
  },
  methods: {
    // 获取选项样式
    getItemStyle(item, index) {
      const style = {
        fontSize: `${this.fontSize}rpx`
      }
      
      if (this.modelValue === (item.value ?? index)) {
        style.color = this.activeColor || 'var(--fu-primary-color)'
      } else {
        style.color = this.inactiveColor || 'var(--fu-text-color)'
      }
      
      return style
    },
    
    // 点击选项
    onClick(item, index) {
      if (this.disabled || item.disabled) return
      
      const value = item.value ?? index
      this.$emit('update:modelValue', value)
      this.$emit('change', value)
    },
    
    // 更新选中背景位置
    updateThumb() {
      const items = this.$el.querySelectorAll('.fu-segmented__item')
      const activeIndex = this.options.findIndex((item, index) => 
        this.modelValue === (item.value ?? index)
      )
      
      if (activeIndex === -1 || !items[activeIndex]) return
      
      const activeItem = items[activeIndex]
      this.thumbWidth = activeItem.offsetWidth
      this.thumbOffset = activeItem.offsetLeft
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-segmented {
  display: inline-block;
  width: 100%;
  max-width: 686rpx;
  
  &__wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding: 3rpx;
    background: var(--fu-background-color);
    border-radius: var(--fu-radius-base);
    border: 2rpx solid var(--fu-primary-color-light);
    overflow: hidden;
  }
  
  &__item {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 0 32rpx;
    height: 64rpx;
    line-height: 64rpx;
    text-align: center;
    background: transparent;
    transition: all 0.3s;
    z-index: 1;
    cursor: pointer;
    
    &--active {
      font-weight: 500;
    }
    
    &--disabled {
      color: var(--fu-text-color-disabled) !important;
      cursor: not-allowed;
      opacity: 0.6;
    }
  }
  
  &__text {
    display: inline-block;
    white-space: nowrap;
    transition: transform 0.3s;
    
    .fu-segmented__item--active & {
      transform: scale(1.05);
    }
  }
  
  &__thumb {
    position: absolute;
    left: 3rpx;
    top: 3rpx;
    bottom: 3rpx;
    z-index: 0;
    background: #fff;
    border-radius: calc(var(--fu-radius-base) - 4rpx);
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    transition: width 0.3s, transform 0.3s;
  }
  
  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    
    .fu-segmented__wrap {
      border-color: var(--fu-border-color);
    }
  }
}
</style> 